{% extends "sniffbook/base.html" %}
{% block content %}
<h1>{{ mat.name }}</h1>

{% if mat.is_accord %}
<a href="/render/{{mat.id}}/">Render</a>
{% endif %}

<!--
<p/>
<a href="/material/{{mat.id}}/delete/">Delete</a>
-->

<form action="/material/{{mat.id}}/delete/" method="POST">
{% csrf_token %}
<input type="submit" value="Delete">
</form>

<form action="/material/{{mat.id}}/" method="POST">
{% csrf_token %}
{{ form.as_p }}

{{ comp_formset.management_form }}
<table>
{% for form in comp_formset.forms %}
<div class='compformrow'>
<tr>
{% for field in form %}
  {% ifnotequal field.label 'Id' %}
  {{ field.errors }}
  <td>{{ field.label_tag }}</td><td>{{ field }}</td>
  {% else %}
  {{ field }}
  {% endifnotequal %}
{% endfor %}
<td>
{% if form.instance.component_id %}
<a href="/material/{{ form.instance.component_id }}/">Go</a>
{% endif %}
</td>
</tr>
</div>
{% endfor %}
</table>
<!-- <input type="button" value="Add More" id="add_more">

<script>
$('#add_more').click(function() {
  cloneMore('div.compformrow:last', 'comps');
});

// TODO: FIXME fix this. newElement.html is empty, why?
// TODO: move to .js file and include.
function cloneMore(selector, type) {
    var newElement = $(selector).clone();
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    alert(newElement.html());
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        alert(name);
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}
</script>
-->

<input type="submit" value="Save" />
</form>

</p>
{% endblock %}
